{% extends 'base.html' %}
{% load static %}

{% block title %}搜索结果：{{ search_query }} - AI故事生成系统{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="mb-4">
        <h1>搜索结果：{{ search_query }}</h1>
        <form method="get" action="/" class="d-flex mt-3">
            <input type="text" name="q" class="form-control me-2" placeholder="搜索故事..." value="{{ search_query }}">
            <button type="submit" class="btn btn-primary">搜索</button>
        </form>
    </div>
    
    {% if search_results %}
    <div class="mb-2">
        <p>找到 {{ search_results.paginator.count }} 个结果</p>
    </div>
    
    <div class="row row-cols-1 row-cols-md-3 g-4">
        {% for story in search_results %}
        <div class="col">
            <div class="card h-100 shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">
                        <a href="{% url 'story:detail' story.pk %}" class="text-decoration-none text-dark">
                            {{ story.title }}
                        </a>
                    </h5>
                    <h6 class="card-subtitle mb-2 text-muted">
                        {% if story.category %}
                        <span class="badge bg-primary">{{ story.get_category_display }}</span>
                        {% endif %}
                        <small>作者：{{ story.author.username }}</small>
                    </h6>
                    <p class="card-text text-truncate">{{ story.content|striptags }}</p>
                </div>
                <div class="card-footer bg-transparent d-flex justify-content-between">
                    <small class="text-muted">{{ story.created_at|date:"Y-m-d" }}</small>
                    <div>
                        <small class="text-muted me-2">
                            <i class="bi bi-eye"></i> {{ story.views }}
                        </small>
                        <small class="text-muted">
                            <i class="bi bi-heart"></i> {{ story.likes }}
                        </small>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <!-- 分页 -->
    {% if search_results.paginator.num_pages > 1 %}
    <nav class="mt-4">
        <ul class="pagination justify-content-center">
            {% if search_results.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?q={{ search_query }}&page=1">首页</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?q={{ search_query }}&page={{ search_results.previous_page_number }}">上一页</a>
            </li>
            {% endif %}
            
            <li class="page-item active">
                <span class="page-link">
                    {{ search_results.number }} / {{ search_results.paginator.num_pages }}
                </span>
            </li>
            
            {% if search_results.has_next %}
            <li class="page-item">
                <a class="page-link" href="?q={{ search_query }}&page={{ search_results.next_page_number }}">下一页</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?q={{ search_query }}&page={{ search_results.paginator.num_pages }}">末页</a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
    
    {% else %}
    <div class="alert alert-info">
        没有找到匹配 "{{ search_query }}" 的故事
    </div>
    {% endif %}
    
    <div class="mt-4">
        <a href="/" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> 返回首页
        </a>
    </div>
</div>
{% endblock %} 